<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>专业酒店关系系统</title>
		<meta name="renderer" content="webkit|ie-comp|ie-stand">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<meta http-equiv="Cache-Control" content="no-siteapp" />
		<!-- <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" /> -->
	 
		<link rel="stylesheet" href="${request.contextPath}/static/static/css/font.css">
		<link rel="stylesheet" href="${request.contextPath}/static/static/css/weadmin.css">
		<link rel="stylesheet" type="text/css" href="${request.contextPath}/static/static/css/font-awesome/css/font-awesome.min.css">
		<script type="text/javascript" src="${request.contextPath}/static/lib/layui/layui.js" charset="utf-8"></script>

	</head>

	<body>
		<!-- 遮罩层 加载中显示... -->
		<div class="loading">
			<i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i>
		</div>
		<!-- 顶部开始 -->
		<div class="container">  
			<div class="logo">
				<a href="./index.html"></a>
				<div class="left_open">
					<i title="展开左侧栏" class="fa fa-bars"></i>
				</div>
			</div>
		    <ul class="layui-nav left" lay-filter="">
				<li class="layui-nav-item"><a href="./index.html">商顺酒店后台管理系统</a></li>
		    </ul>
			<ul class="layui-nav right" lay-filter="">
				<li class="layui-nav-item">
					<a href="javascript:;" class="userMsg">
						<img />  <!-- src="./static/images/logo.jpg" -->
						<i><!-- Admin --></i>
					</a>
					<dl class="layui-nav-child">  <!--  style="display: block;" -->
						<dd>
							<a class="myself">
								<i class="fa fa-user"></i>个人信息 
							</a>
						</dd>
						<dd>
							<a class="modifyPsd"><i class="fa fa-key"></i>修改密码</a>
						</dd>
						<dd> 
							<a class="loginout"><i class="fa fa-sign-out"></i>退出登录</a>
						</dd>
					</dl>
				</li>
				<li class="layui-nav-item" title="消息"> <i class="fa fa-envelope-o"></i> </li>
				<li class="layui-nav-item" title="在线人员"> <i class="layui-icon layui-icon-user"></i> </li>
				<li class="layui-nav-item changeSkin" title="更换皮肤"> <i class="fa fa-dashboard"></i> </li> 
				<li id="full-screen" class="layui-nav-item full-screen" title="全屏"> <i class="fa fa-arrows-alt"></i> </li>
			</ul>
		</div>
		<!-- 顶部结束 -->
		<!-- 中部开始 -->
		<!-- 左侧菜单开始 -->
		<div class="left-nav">
			<!-- logo部分开始 -->
			<div class="nav-logo">
				<div class="logoImg">
					<img />   <!-- src="static/images/logo.jpg" -->
				</div>
				<div class="message">
					<p><!-- 用户名 --></p>
					
				</div>
			</div>
			<!-- logo部分结束 -->
			<div id="side-nav">
				<!-- 菜单栏动态显示 -->
			</div>
		</div>
		<!-- 左侧菜单结束 -->
		<!-- 右侧主体开始 -->
		<div class="page-content">
			<div class="layui-tab tab" lay-filter="wenav_tab" id="WeTabTip" lay-allowclose="true">
				<ul class="layui-tab-title" id="tabName">
					<li lay-id="0" class="myHome layui-this">我的桌面</li>
				</ul>
				<div class="layui-tab-content">
					<div class="layui-tab-item layui-show">
						<iframe tab-id="0" src='./pages/welcome.html' frameborder="0" scrolling="yes" class="weIframe"></iframe>
					</div>
				</div>
			</div>
		</div>
		<div class="page-content-bg"></div>
		<!-- 右侧主体结束 -->
		<!-- 中部结束 -->

		<!-- 更换皮肤层 -->
		<div class="skinCover"></div>
		<div id="changeSkin">  <!--  style="display: block;right: 0" -->
			<h3>更换皮肤</h3>  
			<div class="skins">
				<div class="skin-item">
					<div>
						<b data-color="#e08e0b"></b>
						<i data-color="#f39c12"></i>
						<span data-color="#263238"></span>
					</div>
					<p>黄</p>
				</div>
				<div class="skin-item">
					<div>
						<b data-color="#367fa9"></b>
						<i data-color="#3c8dbc"></i>
						<span data-color="#222d32"></span>
					</div>
					<p>蓝</p>
				</div>
				<div class="skin-item">
					<div>
						<b data-color="#fcfcfc"></b>
						<i data-color="#fefefe"></i>
						<span data-color="#222d32"></span>
					</div>
					<p>白</p>
				</div>
				<div class="skin-item">
					<div>
						<b data-color="#555299"></b>
						<i data-color="#605ca8"></i>
						<span data-color="#222d32"></span>
					</div>
					<p>紫</p>
				</div>
				<div class="skin-item">
					<div>
						<b data-color="#008d4c"></b>
						<i data-color="#00a65a"></i>
						<span data-color="#222d32"></span>
					</div>
					<p>绿</p>
				</div>
				<div class="skin-item">
					<div>
						<b data-color="#d33724"></b>
						<i data-color="#dd4b39"></i>
						<span data-color="#222d32"></span>
					</div>
					<p>红</p>
				</div>

				<div class="skin-item">
					<div>
						<b data-color="#e08e0b"></b>
						<i data-color="#f39c12"></i>
						<span data-color="#f9fafc"></span>
					</div>
					<p>黄灰</p>
				</div>
				<div class="skin-item">
					<div>
						<b data-color="#367fa9"></b>
						<i data-color="#3c8dbc"></i>
						<span data-color="#f9fafc"></span>
					</div>
					<p>蓝灰</p>
				</div>
				<div class="skin-item">
					<div>
						<b data-color="#fcfcfc"></b>
						<i data-color="#fefefe"></i>
						<span data-color="#f9fafc"></span>
					</div>
					<p>白灰</p>
				</div>
				<div class="skin-item">
					<div>
						<b data-color="#555299"></b>
						<i data-color="#605ca8"></i>
						<span data-color="#f9fafc"></span>
					</div>
					<p>紫灰</p>
				</div>
				<div class="skin-item">
					<div>
						<b data-color="#008d4c"></b>
						<i data-color="#00a65a"></i>
						<span data-color="#f9fafc"></span>
					</div>
					<p>绿灰</p>
				</div>
				<div class="skin-item">
					<div>
						<b data-color="#d33724"></b>
						<i data-color="#dd4b39"></i>
						<span data-color="#f9fafc"></span>
					</div>
					<p>红灰</p>
				</div>
			</div>
		</div>

		<!-- 底部开始 -->
		<div class="footer">
		    
			<div class="copyright">湖南商顺科技|商顺酒店管理系统           
			    Copyright ©2019       联系电话 18942532416</div>
		</div>
		<!-- 底部结束 -->
		<script type="text/javascript" src="lib/jquery-3.3.1.min.js"></script>
	    <script src="static/js/constant.js"></script>
		<script type="text/javascript" src="static/js/jq.js"></script>
			<!-- <script type="text/javascript" src="js/main.js"></script> -->
		<!-- <script id="menuTree" type="text/html">
			左侧菜单栏模板
			<ul id="nav">
				{{#  layui.each(d.data, function(index, item){ }}
				<li>
					<a href="javascript:;">
						<i class="fa {{item.css}}"></i>
						<cite>{{item.name}}</cite>
						{{#  if( item.child ){ }}
						<i class="iconfont nav_right">&#xe697;</i>
						{{# } }}
					</a>
					{{#  if( item.child ){ }}
					<ul class="sub-menu">
						{{#  for (var i = 0; i < item.child.length; i++){ }}
						<li>
							<a _href="{{item.child[i].url}}">
								<i class="fa {{item.child[i].css}}"></i>
								<cite>{{item.child[i].name}}</cite>
							</a>
						</li>
						{{# } }}
					</ul>
					{{# } }}
				</li>
				{{#  }) }} 
			</ul>
		</script> -->
		<script type="text/javascript">
			
			layui.config({
			  base: './static/js/'
			  ,version: '20180530'
			}).use('admin');
			layui.use(['jquery', 'laytpl', 'admin'], function(){
				var $ = layui.jquery,
					laytpl = layui.laytpl;

				$(function () {
					//初始化左菜单栏
					initMenu();
					function initMenu () {
						$.ajax({
							url:  "/permissions/findMySysMenu",  
							type: "get",  
		     				async: false,
		     				success: function (data) {
		     					// $('.loading').addClass('hideLoading');
		     					//if(!$.isArray(data)){
						    		//location.href = localStorage.getItem("loginUrl");
						    		//return;
						    	//}
		     					 console.log( data );
		     					var menuData = data.data,
		     						length = menuData.length;
		     					var lis = '';
		     					//遍历data
		     					for (var i =0; i < length; i++) {
	     							var liL = '<li>',
	     								aL1 = '<a href="javascript:;">',
	     								aL2 = '<a _href="' + menuData[i].href + '">',
	     								i1 = '<i class="fa ' + menuData[i].css + '"></i>',
	     								cite = '<cite>' + menuData[i].name + '</cite>',
	     								i2 = '<i class="iconfont nav_right">&#xe697;</i>', //下拉图标
	     								aR = '</a>',
	     								liR = '</li>';
	     							var li = '';
	     							
	     							var childM=menuData[i].child;
	     							if (childM != null && childM.length > 0 ) {
	     								li = liL + aL1 + i1 + cite + i2 + aR + renderChildMenu(childM) + liR;
	     							} else {
	     								li = liL + aL2 + i1 + cite + aR + liR;
	     							}
	     							lis += li;
	     						}
	     						// console.log('--------------------------------------------------------');
	     						// console.log( lis );
		     					function renderChildMenu (childArr) {
		     						if("undefined"==childArr||childArr==null) 
		     							return "";
		     						 
		     						var lis = '',
		     							length = childArr.length;
		     						var ulL = '<ul class="sub-menu">',
		     							ulR = '</ul>';
		     						for (var i = 0; i < length; i++) {
		     							var li = '';
		     							var liL = '<li>',
			     							aL1 = '<a _href="' + childArr[i].href + '">',
			     							aL2 = '<a href="javascript:;">',
			     							i1 = '<i class="fa ' + childArr[i].css + '"></i>',
			     							cite = '<cite>' + childArr[i].name + '</cite>',
			     							i2 = '<i class="iconfont nav_right">&#xe697;</i>', //下拉图标
			     							aR = '</a>',
		     								liR = '</li>';
		     							var child = '';
		     						
		     							
		     							
		     							 var childM=childArr[i].child;
		     							//子级存在就递归
		     							if (childM != null && childM.length > 0 ) {
		     								child = renderChildMenu(childM);
		     								li = liL + aL2 + i1 + cite + i2 + aR + child + liR;
		     							} else {
		     								li = liL + aL1 + i1 + cite + aR + liR;
		     							}
		     							lis += li;
		     						}
		     						return ulL + lis + ulR;
		     						 
		     					}
		     					// console.log(lis);
		     					$('#side-nav').html( $('<ul id="nav">' + lis + '</ul>') );
		     					/*
		     					//左侧菜单栏模板渲染
		     					var menus = {
		     						data: data
		     					}
		     					var getTpl = menuTree.innerHTML,
									view = document.getElementById('side-nav');
								laytpl(getTpl).render(menus, function(html){
								  view.innerHTML = html;
								});*/
		     				}
						});
					}

					// 登录显示用户头像昵称
					showUserInfo();
					function showUserInfo () {
						$.ajax({
							type : 'get',
							url :  '/sysusers/me',
							async : false,
							success : function(data) {
								//console.log( data );
								data=data.data;
								$(".userMsg i").text( data.nickname );
								$('.message').find('p').text( data.nickname );
								var sex = data.sex;
								var url = data.headImgUrl;
								if(url == null || url == ""){
									if(sex == 1){
										url = "static/images/man.png";
									} else {
										url = "static/images/woman.png";
									}
								}
								$(".userMsg img").attr('src', url);
								$('.logoImg').find('img').attr('src', url).css('height', '45px');
								var div = `<div>
												<a href="javascript:;" class="online">
													<i class="fa fa-circle"></i>
													在线
												</a>
												<a href="javascript:;" class="signout">
													<i class="fa fa-sign-out"></i>
													注销
												</a>
											</div>`;
								$('.message').append( div );
							}
						});
					}

					//注销 登出
					$('.signout').on('click', logout);
					$('.loginout').on('click', logout);
					function logout() {
						$('.container dd').removeClass('layui-this');
						layer.confirm('是否确认退出登录？', function () {
							$.ajax({
								type : 'get',
								url : '/logout',
								success : function(data) {
									console.log(data);
									window.localStorage.removeItem("access_token");
									window.localStorage.removeItem("refresh_token");
									location.href='/login.html';
								}
							});
						});
					}

					//个人信息
					$('.myself').on('click', myself);
					function myself () {
						layer.open({
							title:"个人信息",
							type: 2,
							area: ['700px', '400px'],
							maxmin: true,
							shadeClose: true,
							content: ['pages/user/myself.html']
						});
					}

			
				//个人信息
				$('.modifyPsd').on('click', modifyPsd);
				function modifyPsd () {
					layer.open({
						title:"个人信息",
						type: 2,
						area: ['700px', '400px'],
						maxmin: true,
						shadeClose: true,
						content: ['pages/user/changePassword.html']
					});
				}
				});
				 
				$('.changeSkin').on('click', function () {
					$('.skinCover').addClass('showCover');
					if ( $('#changeSkin').css('display') == 'none' ) {
						$('#changeSkin').css('display', 'block');
					}
					return false;
				});
				$('.skinCover').on('click', function () {
				 	$(this).removeClass('showCover');
				 	if ( $('#changeSkin').css('display') == 'block' ) {
						$('#changeSkin').css('display', 'none');
					}
				});

				//全屏、退出全屏实现
				$('#full-screen').on('click', function () {
					var element = document.documentElement;
					if ( $(this).hasClass('full-screen') ) {
						$(this).removeClass('full-screen');
						if (element.requestFullscreen) {  
			                element.requestFullscreen();  
			            } else if (element.mozRequestFullScreen) {  
			                element.mozRequestFullScreen();  
			            } else if (element.webkitRequestFullscreen) {  
			                element.webkitRequestFullscreen();  
			            } else if (element.msRequestFullscreen) {  
			                element.msRequestFullscreen();  
			            }
					} else {
						$(this).addClass('full-screen');
						if (document.exitFullscreen) {  
			                document.exitFullscreen();  
			            } else if (document.mozCancelFullScreen) {  
			                document.mozCancelFullScreen();  
			            } else if (document.webkitCancelFullScreen) {  
			                document.webkitCancelFullScreen();  
			            } else if (document.msExitFullscreen) {  
			                document.msExitFullscreen();  
			            } 
					}
				});
				 
				 //点击换肤
				 $('.skin-item').on('click', function () {
				 	let leftNavColor = $(this).find('span').data('color'),
				 		topNavColor  = $(this).find('i').data('color'),
				 		leftTopNavColor = $(this).find('b').data('color');

				 	//将换肤的颜色存储到本地缓存
				 	let skins = {};
				 	skins.leftNavColor = leftNavColor;
				 	skins.topNavColor = topNavColor;
				 	skins.leftTopNavColor = leftTopNavColor;
				 	let topNavFontColor = '', 
				 		leftNavFontColor = '',
				 		liActive = '',
				 		leftNavChoosedBg = ''; //左侧导航栏被选中的背景色
				 	if ( topNavColor == '#fefefe' ) {
				 		topNavFontColor = '#333';
				 	} else {
				 		topNavFontColor = '#fff';
				 	}
				 	if ( leftNavColor == '#f9fafc' ) {
				 		// leftNavFontColor = '#555';
				 		leftNavFontColor = 'leftNavBlack';
				 		liActive = 'active';
				 	} else {
				 		// leftNavFontColor = '#b8c7ce';
				 		leftNavFontColor = 'leftNavWhite';
				 		liActive = 'liDefault';
				 	}


				 	//判断左侧导航栏被选中时的背景色
				 	if ( leftNavColor == '#f9fafc' ) {
				 		leftNavChoosedBg = 'gray';
				 	} else if ( topNavColor == '#f39c12' ) {  //黄色
				 		leftNavChoosedBg = 'yellow';
				 	} else if ( topNavColor == '#3c8dbc' ) {  //蓝色
				 		leftNavChoosedBg = 'blue';
				 	} else if ( topNavColor == '#fefefe' ) {  //白色
				 		leftNavChoosedBg = 'white';
				 	} else if ( topNavColor == '#605ca8' ) {  //紫色
				 		leftNavChoosedBg = 'purple';
				 	} else if ( topNavColor == '#00a65a' ) {  //绿色
				 		leftNavChoosedBg = 'green';
				 	} else if ( topNavColor == '#dd4b39' ) {  //红色
				 		leftNavChoosedBg = 'red';
				 	}
				 	skins.leftNavChoosedBg = leftNavChoosedBg;

				 	skins.topNavFontColor = topNavFontColor;
				 	skins.leftNavFontColor = leftNavFontColor;
				 	skins.liActive = liActive;
				 	// console.log(skins);
				 	window.localStorage.setItem('skins', JSON.stringify(skins));

				 	let localSkins = JSON.parse( window.localStorage.getItem('skins') );
				 	// console.log(localSkins);

				 	//背景色修改
				 	$('.left-nav').css('background', localSkins.leftNavColor);
				 	$('.container').css('background', localSkins.topNavColor).find('.logo').css('background', localSkins.leftTopNavColor);

				 	//字体颜色修改
				 	$('.container').find('.logo a').css('color', localSkins.topNavFontColor).end().find('.layui-nav li').find('i').css('color', localSkins.topNavFontColor).end().find('>a').css('color', localSkins.topNavFontColor);
				 	$('.left_open i').css('color', localSkins.topNavFontColor);
				 	// $('.left-nav a').find('i').css('color', localSkins.leftNavFontColor).end().find('cite').css('color', localSkins.leftNavFontColor);
				 	$('.left-nav a').find('i').removeClass('leftNavBlack leftNavWhite').end().find('cite').removeClass('leftNavBlack leftNavWhite');
				 	$('.left-nav a').find('i').addClass(localSkins.leftNavFontColor).end().find('cite').addClass(localSkins.leftNavFontColor);

				 	$('.nav-logo .message').find('p').removeClass('leftNavBlack leftNavWhite');
				 	$('.nav-logo .message').find('p').addClass(localSkins.leftNavFontColor);

				 	$('.nav-logo .message').find('a').removeClass('leftNavBlack leftNavWhite');
				 	$('.nav-logo .message').find('a').addClass(localSkins.leftNavFontColor);

				 	$('.left-nav #nav li').removeClass('active liDefault');
				 	$('.left-nav #nav li').addClass(localSkins.liActive);

				 	//先移除所有  再添加特定
				 	$('.left-nav').find('a.choosedColor').removeClass('yellow blue white purple green red gray');
				 	$('.left-nav').find('a.choosedColor').addClass(localSkins.leftNavChoosedBg);

				 	//隐藏皮肤选项栏和遮罩层
				 	$('#changeSkin').css('display', 'none');
				 	$('.skinCover').removeClass('showCover');
				 });

				$(function () {
					let localSkins = JSON.parse( window.localStorage.getItem('skins') );
					 //本地缓存的皮肤为空则默认设置
					 if ( localSkins == null ) {
					 	//背景色设置
					 	$('.left-nav').css('background', '#263238');
					 	$('.container').css('background', '#f39c12').find('.logo').css('background', '#e08e0b');
					 } else {
					 	//背景色设置
					 	$('.left-nav').css('background', localSkins.leftNavColor);
					 	$('.container').css('background', localSkins.topNavColor).find('.logo').css('background', localSkins.leftTopNavColor);

					 	//字体颜色设置
					 	$('.container').find('.logo a').css('color', localSkins.topNavFontColor).end().find('.layui-nav li').find('i').css('color', localSkins.topNavFontColor).end().find('>a').css('color', localSkins.topNavFontColor);
					 	$('.left_open i').css('color', localSkins.topNavFontColor);
					 	$('.left-nav a').find('i').addClass(localSkins.leftNavFontColor).end().find('cite').addClass(localSkins.leftNavFontColor);
					 	$('.nav-logo .message').find('p').addClass(localSkins.leftNavFontColor).end().find('div a').addClass(localSkins.leftNavFontColor);
					 	// $('.left-nav a').find('i').css('color', localSkins.leftNavFontColor).end().find('cite').css('color', localSkins.leftNavFontColor);
					 	$('.left-nav #nav li').addClass(localSkins.liActive);
					 	$('.left-nav #nav li').find('.choosedColor').addClass(localSkins.leftNavChoosedBg);
					 	// console.log( localSkins.leftNavChoosedBg );
					 }
					 // console.log(localSkins);
					 // window.localStorage.removeItem('skins');
				});
			});
		</script>
	</body>
	<!--Tab菜单右键弹出菜单-->
	<ul class="rightMenu" id="rightMenu">
        <li data-type="fresh">刷新</li>
        <li data-type="current">关闭当前</li>
        <li data-type="other">关闭其它</li>
        <li data-type="all">关闭所有</li>
    </ul>

</html>